<template>
	<div class="inviterMsg">
		<inviter-search @conditions="getConditions" />

		<!-- 表格 -->
		<div class="table_box">
			<el-table :data="tableData" :header-cell-style="{ 'text-align': 'center' }" :cell-style="{ 'text-align': 'center' }" border style="width: 100%;">
				<el-table-column prop="merchName" label="商户名称" />
				<el-table-column prop="merchPhone" label="联系电话" />
				<el-table-column prop="address" label="商户总部地址" />
				<el-table-column prop="stakeValue" label="出资方">
					<template slot="header" slot-scope="scope">
						<span>出资方</span>
						<el-tooltip popper-class="el-tooltip-theme-fresh" placement="top" effect="light">
							<div slot="content">出资方指优惠折扣或活动优惠的钱由谁承担</div>
							<i class="el-icon-question" />
						</el-tooltip>
					</template>
					<template slot-scope="scope">
						<p>{{ scope.row.stakeValue == 1 ? '本商户' : '邀请商户' }}</p>
					</template>
				</el-table-column>
				<el-table-column prop="discount" label="优惠折扣" />
				<el-table-column prop="commission" label="抽佣比例" />
				<el-table-column>
					<template slot="header" slot-scope="scope">
						<span>积分抵扣比例</span>
						<el-tooltip popper-class="el-tooltip-theme-fresh" placement="top" effect="light">
							<div slot="content">指用户可使用积分抵扣金额比例，抵扣的钱邀请商户补贴给合作商户;</div>
							<div slot="content">0%表示用户不可使用积分抵扣;</div>
							<i class="el-icon-question" />
						</el-tooltip>
					</template>
					<template slot-scope="scope">
						<p>{{ scope.row.integralProportion }} %</p>
					</template>
				</el-table-column>
				<el-table-column prop="time" label="邀请时间" />
				<el-table-column prop="trueTime" label="确定时间" />
				<el-table-column prop="statusTxt" label="状态">
					<template slot-scope="scope">
						<div>{{ scope.row.statusTxt }}</div>
						<div v-if="scope.row.status == 3" style="color: red;">【插件到期，系统拒绝】</div>
					</template>
				</el-table-column>
				<el-table-column label="操作">
					<template slot-scope="scope">
						<el-button :disabled="scope.row.statusTxt == '已同意' || scope.row.statusTxt == '已拒绝'" type="text" size="small" @click="changeDialog(scope.row, 1)">
							同意加入
						</el-button>
						<el-button :disabled="scope.row.statusTxt == '已同意' || scope.row.statusTxt == '已拒绝'" type="text" size="small" @click="changeDialog(scope.row, 0)">
							拒绝加入
						</el-button>
					</template>
				</el-table-column>
			</el-table>
		</div>

		<pag-ination :page-total="pagTotal" @pageNum="getPageNum" @pageSize="getPageSize" />
	</div>
</template>

<script>
import { beInviteRecord, joinSuperMemberOperation } from '@/api/business';
import inviterSearch from '../../components/inviterSearch/index.vue';
import pagInation from '../../components/pagInation/index.vue';
export default {
	components: {
		'inviter-search': inviterSearch,
		'pag-ination': pagInation
	},
	data() {
		return {
			/* 查询 */
			conditions: {
				businessName: '',
				mobile: '',
				status: '',
				pageNum: 1,
				pageSize: 10
			},
			pagTotal: null,

			/* 表格 */
			tableData: [
				{
					merchName: '商家 1',
					merchPhone: '18924578589',
					address: '上海市普陀区金沙江路',
					stakeValue: '898989',
					discount: '9折',
					commission: '5%',
					integralProportion: 13,
					time: '2022-02-08 12:22:21',
					trueTime: '2022-02-08 12:22:21',
					status: '待同意'
				}
			]
		};
	},
	mounted() {
		this.beInvitedMsgFun();
	},
	methods: {
		/* 查询条件 */
		getConditions(conditions) {
			const { merchName, merchPhone, statusOptionsValue, stakeValue } = conditions;
			const conditionsVal = {
				businessName: merchName,
				mobile: merchPhone,
				financingParty: stakeValue,
				pageNum: 1,
				pageSize: this.conditions.pageSize,
				status: statusOptionsValue // 0:待同意, 1:已同意, 2: 已拒绝
			};
			this.conditions = conditionsVal;
			console.log('查询条件', this.conditions);
			this.beInvitedMsgFun();
		},
		// 获取分页
		getPageNum(val) {
			this.conditions.pageNum = val;
			this.beInvitedMsgFun();
		},
		getPageSize(val) {
			this.conditions.pageSize = val;
			this.beInvitedMsgFun();
		},

		/* 表格 */
		// 被邀请记录
		beInvitedMsgFun() {
			beInviteRecord(this.conditions).then(res => {
				console.log('被邀请记录', res);
				if (res.code == 0) {
					this.pagTotal = res.data.total;
					const data = res.data.list;
					const tableData = [];
					data.forEach(el => {
						const dataItem = {
							merchName: el.businessName,
							merchPhone: el.mobilePhone,
							address: el.address,
							stakeValue: el.financingParty,
							discount: el.discount,
							commission: el.rakeRate,
							integralProportion: el.deductionRatio,
							time: el.inviteTime,
							trueTime: el.confirmTime,
							id: el.id,
							statusTxt: el.status == 0 ? '待同意' : el.status == 1 ? '已同意' : '已拒绝',
							status: el.status
						};
						tableData.push(dataItem);
					});
					this.tableData = tableData;
				}
			});
		},
		// 同意/拒绝加入
		joinStatusFun(row, status) {
			const { id } = row;
			const form = {
				id,
				operation: status
			};
			joinSuperMemberOperation(form).then(res => {
				console.log('同意/拒绝加入', res);
				if (res.code == 0) {
					this.$message({
						type: 'success',
						message: '操作成功!'
					});
					this.beInvitedMsgFun();
				}
			});
		},

		// 弹框
		changeDialog(row, status) {
			let content = '';
			if (status == 1) {
				content = '同意加入后，超级会员用户下单将享受折扣优惠。';
			} else {
				content = '拒绝加入后，超级会员用户下单将不享受折扣优惠。';
			}
			this.$confirm(content, '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			})
				.then(() => {
					this.joinStatusFun(row, status);
				})
				.catch(() => {
					// this.$message({
					//   type: 'info',
					//   message: '已取消删除'
					// })
				});
		}
	}
};
</script>

<style lang="scss" scoped>
.inviterMsg {
	.table_box {
		width: 100%;
		overflow: hidden;
		padding: 20px;
		background-color: white;
	}
}
</style>
